

<template>
  <div class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg " @click="openDrawer">
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-1">
      <common-title-module />
      
      <div class="flex mb-2" v-for="(item, i) in data.varagglist" :key="i">
        <p class="mr-3 node-sub-text">Group{{i+1}}</p>
        <div class="w-full">
          <span class="mb-1 text-bg-normal">{{item.vartype}}</span>
          <CommonDisplayModule nameLabel="varparam" :valueList="item?.inoutlist" />
        </div>
      </div>
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
  <VariableMergeDrawerModule ref="drawerRef" :title="node?.node?.label" :form="data" @cancel="onCancel" />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { editNode } from '@/api/modules/flow';

import CommonTitleModule from '../modules/common-title-module.vue';
import VariableMergeDrawerModule from '../modules/variable-merge-drawer-module.vue';
defineProps();
const node = useNode();

const data = ref({
  aggstrategy: node.node.data?.aggstrategy || '返回每个分组中第一个非空的值',
  varagglist: node.node.data?.varagglist || [
    {
      vartype: 'String',
      inoutlist: [
        {
          varparam: '',
          vartype: 'String',
        },
      ]
    },
  ],
})

const drawerRef = ref(null);
const openDrawer = () => {
  drawerRef.value?.init();
};


const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}
</script>